﻿@{
    ViewBag.Title = "菜单管理";
    Layout = "~/Views/Shared/_LayuiLayout.cshtml";
}

<blockquote class="layui-elem-quote">
    <div class="pos-r h-38" id="topbar">
        <span>
            @{
                bool isHasRow; // 是否有行操作
            }
            @Html.SysMenuButton(MenuPosType.行列, out isHasRow)
        </span>
    </div>
</blockquote>

<!-- 数据表格 -->
<table id="tbList" lay-filter="tbList"></table>

<script type="text/html" id="barOperation">
    <div class="layui-btn-group">
        <button type="button" class="layui-btn layui-btn-sm" lay-event="AddChild" title="添加子菜单"><i class="layui-icon">&#xe654;</i></button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="Edit" title="修改"><i class="layui-icon">&#xe642;</i></button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="Button" title="按钮"><i class="layui-icon">&#xe620;</i></button>
        <button type="button" class="layui-btn layui-btn-sm" lay-event="Delete" title="删除"><i class="layui-icon">&#xe640;</i></button>
    </div>
</script>

<script type="text/html" id="tmplSwitchEnable">
    <input type="checkbox" name="IsEnable" value="{{d.Id}}" lay-skin="switch"
           lay-text="启用|禁用" lay-filter="isEnable" {{ d.IsEnable ? 'checked' : '' }}>
</script>

@section scripts{
    <script>
    var $, layer;
    layui.use(['table', 'form'], function () {
        var table = layui.table,
            form = layui.form;
        $ = layui.jquery;
        layer = layui.layer;

        //执行渲染
        table.render({
            elem: '#tbList',
            height: 'full-128',
            url: '@Url.Action("GetMenuList", "Menu")',
            method: 'post',
            cols: [[
                { field: 'Id', title: 'Id', width: 80, sort: true, fixed: 'left' },
                { field: 'MenuName', title: '名称', width: 200 },
                { field: 'MenuUrl', title: '链接'},
                { field: 'MenuArea', title: '区域', width: 100 },
                { field: 'MenuControl', title: '控制器', width: 150 },
                { field: 'MenuAction', title: '方法', width: 100 },
                { field: 'ParentId', title: '上级菜单', width: 100 },
                { field: 'MenuDeep', title: '深度', width: 80 },
                { field: 'SortIndex', title: '排序', width: 80 },
                { field: 'IsEnable', title: '是否启用', sort: true, width: 100, unresize: true, templet: '#tmplSwitchEnable' },
                { title: '操作',fixed: 'right', align: 'center', unresize: true, toolbar: '#barOperation' },
            ]]
        });

        //刷新
        reload = function () {
            table.reload('tbList');
        }

        var active = {
            Reload: function () {
                reload();
            },
            Search: function () {

            },
            Add: function () {
                layer_show('', '添加菜单', '@Url.Action("MenuAddOrEdit", "Menu")', '400px', '100%','r');
            }
        };

        //监听表头按钮点击
        $('#topbar .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听工具条
        table.on('tool(tbList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'AddChild') {
                layer_show('', '添加菜单', '@Url.Action("MenuAddOrEdit", "Menu")' + '?parentId=' + data.Id, '400px', '100%', 'r');
            } else if (obj.event === 'Edit') {
                layer_show('', '修改菜单', '@Url.Action("MenuAddOrEdit", "Menu")' + '?id=' + data.Id, '400px', '100%', 'r');
            } else if (obj.event === 'Button') {
                layer_show('', '按钮 ' + data.MenuName, '@Url.Action("ButtonList", "Menu")' + '?id=' + data.Id, '100%', '100%');
            } else if (obj.event === 'Delete') {
                layer.confirm('确定删除吗？', function (index) {
                    $.post('@Url.Action("Delete", "Menu")', { id: data.Id }, function (response) {
                        if (response.Success) {
                            layer.msg(response.Message, { icon: 1, time: 1000 });
                            reload();
                        } else {
                            layer.alert(response.Message, { icon: 2 });
                        }
                    });
                });
            }
        });

        //form界面启用按钮事件
        form.on('switch(isEnable)', function (data) {
            $.post("@Url.Action("IsEnable", "Menu")", { Id: data.value, check: data.elem.checked },
                function (res) {
                    if(res.Success)
                        layer.msg(res.Message, { icon: 1, time: 1000 });
                    else
                        layer.alert(res.Message, { icon: 2 });
            });
        });
    });
    </script>
}

